<!--
 * @Author: zhangyonggui
 * @Date: 2023-10-25 15:20:50
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2024-01-20 10:55:30
 * @Descripttion: 
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="false"
    width="40%"
  >
    <div class="dialog-body">
      <el-form
        class="ruleForm"
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="上级单位：" prop="">
          <el-input
            v-model.trim="ruleForm.sourceName"
            size="small"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="单位名称：" prop="targetName">
          <el-input v-model.trim="ruleForm.targetName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="关系：" prop="">
          <el-select
            v-model="ruleForm.relation"
            size="small"
            multiple
            :popper-append-to-body="false"
            placeholder="请选择"
          >
            <el-option label="企业分支机构" value="branch"></el-option>
            <el-option label="企业控股公司" value="controlling"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="股权比例：" prop="">
          <el-input v-model.trim="ruleForm.ratio" size="small"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">取 消</el-button>
      <el-button type="primary" size="small" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, watch, onMounted, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useStore } from 'vuex';
const store = useStore();
const emit = defineEmits(['update:isShow', 'updateCompany']);
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '确认',
  },
  nodeData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const visible = ref(props.isShow);
const ruleForm = reactive<any>({
  sourceName: '',
  targetName: '',
  relation: [],
  ratio: '',
});
const ruleFormRef = ref<any>(null);
const rules = reactive({
  targetName: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
  relation: [{ required: true, message: '请选择', trigger: 'change' }],
  ratio: [{ required: true, message: '请输入股权比例', trigger: 'blur' }],
});
watch(
  () => visible.value,
  (newValue, oldValue) => {
    emit('update:isShow', newValue);
  },
);
onMounted(() => {
  if (props.nodeData) {
    ruleForm.sourceName = props.nodeData.name;
  } else {
    ruleForm.sourceName = '';
  }
});
const cancel = () => {
  visible.value = false;
};
const resetForm = () => {
  ruleForm.sourceName = '';
  ruleForm.targetName = '';
  ruleForm.relation = [];
  ruleForm.ratio = 0;
};
const confirm = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      ruleForm.relation = ruleForm.relation.join(',');

      const { code, data } = await store.dispatch(
        'api/enterpriseSave',
        ruleForm,
      );
      if (code === 0) {
        ElMessage.success('新增成功');
        cancel();
        resetForm();
        emit('updateCompany');
      }
    } else {
      return false;
    }
  });
};
</script>
<style lang="scss" scoped>
.asset-count {
  margin-bottom: 10px;
}
.tag-container {
  @include flexBox($justifyContent: flex-start);
  gap: $-v-spacing-horizontal-small; /* 设置子项之间的间距 */

  .el-input {
    max-width: 200px;
  }

  .tag {
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    font-size: 12px;
    color: #3aceff;
    border: 0.5px solid rgba(58, 206, 255, 0.6);
    border-radius: 4px;
    background: rgba(58, 206, 255, 0.1);
    max-width: 156px;

    > span {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: nowrap;
    }
    &:hover:not(.tag-num) {
      background: rgba(58, 206, 255, 0.3);
      .tag-close {
        display: inherit;
      }
    }
    .tag-close {
      width: 12px;
      margin-left: 4px;
      display: none;
      cursor: pointer;
    }
  }

  .new-tag {
    display: flex;
    align-items: center;
    height: 26px;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 12px;
    line-height: 12px;
    color: $-v-color-primary;
    background: rgba(58, 125, 255, 0.1);
    border: 0.5px dashed $-v-color-primary;
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
